<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
</style>
<body>
<div id="mountNode"></div>
<script src="./assets/dagre.js"></script>
<script src="../build/g6.js"></script>
<script>
  const data = {
    nodes: [
      {
        id: 1,
        type: 'alps',
        name: 'alps_file1',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 2,
        type: 'alps',
        name: 'alps_file2',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 3,
        type: 'alps',
        name: 'alps_file3',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 4,
        type: 'sql',
        name: 'sql_file1',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 5,
        type: 'sql',
        name: 'sql_file2',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 6,
        type: 'feature_etl',
        name: 'feature_etl_1',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 7,
        type: 'feature_etl',
        name: 'feature_etl_1',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      },
      {
        id: 8,
        type: 'feature_extractor',
        name: 'feature_extractor',
        conf: [
          {
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }
        ]
      }
    ],
    edges: [
      {
        source: 1,
        target: 2
      },
      {
        source: 1,
        target: 3
      },
      {
        source: 2,
        target: 4
      },
      {
        source: 3,
        target: 4
      },
      {
        source: 4,
        target: 5
      },
      {
        source: 5,
        target: 6
      },
      {
        source: 6,
        target: 7
      },
      {
        source: 7,
        target: 8
      }
    ]
  };
  const g = new dagre.graphlib.Graph();
  g.setDefaultEdgeLabel(function() { return {}; });
  g.setGraph({ rankdir: 'TB' });
  const labelStyle = {
    style: {
      fill: '#fff',
      fontSize: 14,
      fontWeight: 'bold'
    }
  };
  const edgeStyle = {
    endArrow: true,
    lineWidth: 2,
    stroke: 'rgb(76,122,187)'
  };
  data.nodes.forEach(node => {
    node.id = node.id + '';
    node.shape = 'sql';
    node.label = node.name;
    node.labelCfg = labelStyle;
    node.size = [ 150, 50 ];
    g.setNode(node.id + '', { width: 150, height: 50 });
  });
  data.edges.forEach(edge => {
    edge.source = edge.source + '';
    edge.target = edge.target + '';
    edge.style = edgeStyle;
    edge.shape = 'polyline';
    g.setEdge(edge.source, edge.target);
  });
  dagre.layout(g);
  let coord;
  g.nodes().forEach((node, i) => {
    coord = g.node(node);
    data.nodes[i].x = coord.x;
    data.nodes[i].y = coord.y;
  });
  g.edges().forEach((edge, i) => {
    coord = g.edge(edge);
    data.edges[i].startPoint = coord.points[0];
    data.edges[i].endPoint = coord.points[coord.points.length - 1];
    data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1);

  });
  G6.registerNode('sql', {
    drawShape(cfg, group) {
      const rect = group.addShape('rect', {
        attrs: {
          x: -75,
          y: -25,
          width: 150,
          height: 50,
          radius: 10,
          stroke: 'rgb(36,60,96)',
          fill: 'rgb(76,122,187)'
        }
      });
      return rect;
    }
  }, 'single-shape');
  G6.Global.nodeStateStyle.selected = {
    stroke: '#d9d9d9',
    fill: '#5394ef'
  };

  const graph = new G6.Graph({
    container: 'mountNode',
    width: 500,
    height: 500,
    pixelRatio: 2,
    modes: {
      default: [ 'drag-canvas', 'zoom-canvas', 'click-select', {
        type: 'tooltip',
        formatText(model) {
          const cfg = model.conf;
          const text = [];
          cfg.forEach(row => {
            text.push(row.label + ':' + row.value + '<br>');
          });
          return text.join('\n');
        },
        shouldUpdate: e => {
          // 如果移动到节点文本上显示，不是文本上不显示
          if (e.target.type !== 'text') {
            return false;
          }
          return true;
        }
      }]
    },
    fitView: true
  });
  graph.data(data);
  graph.render();
</script>
</body>
</html>
